﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<div id="app">
	<table width="100%">
		<tr>
			<td>
				<p color="black">您正在做的业务是:人力资源--权限管理--用户管理</p>
			</td>
		</tr>
		<tr>
			<td>
				<p color="black">当前角色总数：{{rows}} 例</p>
			</td>
		</tr>
		<tr>
			<td>
                <div align="right">
                    <input type="button" value="新 增" v-on:click="Add()" class="BUTTON_STYLE1">
                    <input type="button" value="返回" class="BUTTON_STYLE1" v-on:click="goBack()">

                </div>
			</td>
		</tr>
	</table>
	<el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
		<el-table-column prop="rolesID" label="角色编号" min-width="120%"></el-table-column>
		<el-table-column prop="rolesName" label="角色名称" min-width="120%"></el-table-column>
		<el-table-column prop="rolesInstruction" label="角色说明" min-width="120%"></el-table-column>
		<el-table-column prop="rolesIf" label="是否可用" min-width="120%"></el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="small" v-on:click="handleEdit(scope.row)">
					修改
				</el-button>
				<el-button size="small" v-on:click="handleDelete(scope.row.rolesID)">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				   :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="rows"
				   v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange">

	</el-pagination>
</div>
<script>
	const { createApp, ref, reactive, computed, watchEffect } = Vue;
	var app = createApp({
		setup() {
			let tableData = ref([])
			const rows = ref(0);
			const currentPage = ref(1);
			const pageSize = ref(5);
			const isUse = ref(false);

			function Fill() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/Roles/RoleFenYe', {
					page: currentPage.value,
					pageSize: pageSize.value,
				}).then(res => {
					console.info(res.data);
					tableData.value = res.data.roles;
					rows.value = res.data.totalRecords;
				})
			}
			Fill();
			const handleSizeChange = (size) => {
				pageSize.value = size;
				Fill();
				isUse.value = true;
			};
			// 处理当前页变化
			const handleCurrentChange = (cpage) => {
				currentPage.value = cpage;
				Fill();
				isUse.value = true;
			};
			function Add() {
				window.location.href = `/Roles/Index1`;
			}
			function handleEdit(row) {
				const queryParams = new URLSearchParams();
				queryParams.set('rol', JSON.stringify(row));
				window.location.href = `/Roles/Index2?${queryParams.toString()}`;
			}
			function handleDelete(rolesID) {
				if (confirm("确定删除")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/Roles/RolesDelete', {
						id: rolesID
					}).then(res => {
						if (res.data) {
							alert("删除成功")
							Fill();
						}
					}).catch(err => {
						console.log(err);
					})
				}
			}

            //返回
            function goBack() {
                history.back();
            }
			return {
				tableData,
				currentPage,
				pageSize,
				rows,
				isUse,
				handleSizeChange,
				handleCurrentChange,
				Add,
				handleDelete,
				handleEdit,
                goBack			    
			}
		}
	})
	app.use(ElementPlus);
	app.mount("#app");
</script>
<style type="text/css">
	body {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
		display: block;
		margin: 8px;
	}

</style>